<template>
  <div class="content">
    <HeaderView @searchingBtn="searchingBtn" />
    <div class="card_list">
      <div class="box-card" v-for="(item, index) in tableData" :key="index">
        <div class="card_left">
          <div class="image_box" @click="detailsBtn(item)">
            <el-image :src="'/httpImage/'+item.personPicUrl" fit="fill">
            </el-image>
            <p><span>{{ item.personalStatus||'' }}</span></p>
          </div>
        </div>
        <div class="card_right" >
          <div>出现天数：<span class="day-big">{{ item.daysAppeared||'--' }}天</span></div>
          <div>档案编号：<span>{{ item.id||'--' }}</span></div>
          <div class="right-grey-item">建档时间：<span>{{ item.createTime||'--' }}</span></div>
          <div class="detail-item" @click="detailsBtn(item)">
            <i class="el-icon-tickets"></i>
            详情
          </div>
        </div>
        <div class="add-item" @click="addBtn(item)">
            <i class="el-icon-circle-plus-outline"></i>
          </div>
      </div>

    </div>
    <div class="btn-pager">
      <PagerView class="page" layout="sizes, prev, pager, next" :pageSizes="[ 20, 40]" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <SetTabsDialog v-if="editConfig.visible" :edit-common-config="editConfig"  @refreshData="getData"/>
  </div>
</template>

<script>
import HeaderView from "@/views/statisticsQuery/components/headerView";
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
import SetTabsDialog from "@/views/residentManage/residentAnalyse/components/setTabsDialog.vue"
import {
  getPersonDocumentList
} from "@/api/statisticsQueryManage/portraitFilingPage"
export default {
  name: "portraitFilingPage",
  mixins: [pageMixin],
  props: {},
  components: {
    HeaderView,
    SetTabsDialog,
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      tableData:[],
      portraitFilingForm:{
        daysAppeared: "",
        startTime: this.$moment(new Date()).subtract(1, "months"),
        endTime:this.$moment(),
        page: 1,
        size: 20,
        orderType: "desc",
        orderName: "id",
      },
      pagerOptions:{
        currPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      editConfig: {
        visible: false,
        infomation: [],
        personIndex: 0,
        currentId: "",
        isLookImg: false,
        tabs: [],
      },
    }
  },
  mounted() {
    this.getData();
  },
  watch: {

  },
  methods: {
    searchingBtn(form) {
      // 上面的搜索列表
      this.portraitFilingForm.daysAppeared= Number(form.daysAppeared)
      this.portraitFilingForm.startTime=form.searchTime?form.searchTime[0]:''
      this.portraitFilingForm.endTime=form.searchTime?form.searchTime[1]:''
      this.portraitFilingForm.orderType=form.orderType
      this.getData()
    },
    async getData() {
      this.portraitFilingForm.page = this.pagerOptions.currPage;
      this.portraitFilingForm.size = this.pagerOptions.pageSize;
      let params = JSON.parse(JSON.stringify(this.portraitFilingForm));
      params.daysAppeared=params.daysAppeared?params.daysAppeared:0
      var res = await getPersonDocumentList(params);
      this.tableData= res.data.datalist || [];
      this.pagerOptions.totalCount = res.data.total;
    },
    detailsBtn(item) {
      // 跳转详情页面
      this.$router.push({ path: 'portraitFilingPage/details', query: { id: item.id}}).catch(err=>{console.log(err)})
    },
    addBtn(item) {
      // 添加
      this.editConfig.isLookImg = true
      this.editConfig.infomation=item
      this.editConfig.visible = true
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;

  // height: calc(100vh - 50px);
  .card_list {
    width: calc(100% - 20px);
    height: calc(100% - 75px - 60px - 24px);
    margin-top: 24px;
    overflow-y: auto;
    margin-right: 20px;

    .box-card {
      width: calc(25% - 20px);
      height:160px;
      float: left;
      opacity: 1;
      background: rgba(46, 94, 171, 0.3);
      border: 3px solid rgba(51, 254, 254, 0.3);
      box-sizing: border-box;
      box-shadow: inset 0px 1px 10px 0px rgba(3, 251, 255, 0.6);
      // display: flex;
      align-items: center;
      border-radius: 10px;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 15px 12px;
      position: relative;
      cursor: pointer;
      &:nth-of-type(4n) {
        margin-right: 0;
      }
      &:hover {
        border: 3px solid #33fefe;
        box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
      }
      .card_left {
        width: 124px;
        float:left;
        box-sizing: border-box;
        margin-right: 12px;

        .image_box {
          width: 124px;
          height: 124px;

          display: inline-block;
          position: relative;
          cursor:pointer;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 26px;
            display: inline-block;
            position: relative;

          }

          p {
            width: 100%;
            margin: 0 auto;
            border-bottom-left-radius: 26px;
            border-bottom-right-radius: 26px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            font-size:12px;
            opacity: 1;
            background: rgba(21, 21, 21, 0.5);
            span{
              width: calc(100% - 20px);
              margin:0 auto;
              display:block;
              white-space:nowrap;
              overflow:hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .card_right {
        width: calc(100% - 126px - 12px);
        height: calc(100% - 25px);
        color: #fff;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: bold;
        line-height: 26px;
        position: relative;
        float:left;
       
        .day-big {
          font-size:18px;
          color: rgba(255, 1, 1, 1)
        }

        .right-grey-item {
          font-size: 12px;
          font-weight: 200;
        }

        .detail-item {
          position: absolute;
          right: 10px;
          top: 0;
          cursor: pointer;
          font-size:12px;
          font-weight: 200;
        }
      }
      .add-item {
          position: absolute;
          right: 15px;
          bottom:10px;
          font-size: 23px;
          cursor: pointer;

        }
    }
  }
  .btn-pager {
    width: calc(100% - 40px);
    justify-content: left;
    position:relative;
  }
}
</style>
